<!DOCTYPE html>
<html>
  
  <head>
      <meta charset="UTF-8">
      <title>购票</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
      <link rel="stylesheet" href="/booking2/css/font.css">
      <link rel="stylesheet" href="/booking2/css/xadmin.css">
      <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="/booking2/lib/layui/layui.js" charset="utf-8"></script>
      <script type="text/javascript" src="/booking2/js/xadmin.js"></script>
      <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
      <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
  </head>
  
  <body background="/booking/images/home/banner.jpg">
    <div class=" text-center layui-col-lg12" style="text-align: center;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend class="x-red">购票中心</legend>
        </fieldset>
    </div>
    <div class=" layui-col-md4">欢乐谷之夜</div>
    <div class="x-body layui-col-md4">
            <fieldset class="layui-elem-field layui-bg-red">
                <legend>请填写信息</legend>
                <div class="layui-field-box layui-bg-gray">


        <form class="layui-form" >
            <div class="layui-form-item">
                <label for="bookingName" class="layui-form-label">
                    <span class="x-red">*</span>姓名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="bookingName" name="bookingName" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="bookingIdenty" class="layui-form-label">
                    <span class="x-red">*</span>身份证号
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="bookingIdenty" name="bookingIdenty" required="" lay-verify="identity"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="bookingTel" class="layui-form-label">
                    <span class="x-red">*</span>预定电话
                </label>
                <div class="layui-input-inline">
                    <input type="tel" id="bookingTel" name="bookingTel" required="" lay-verify="phone"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="time" class="layui-form-label">
                    <span class="x-red">*</span>预定时间
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="time" name="time" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">票种</label>
                    <div class="layui-input-inline">
                        <select name="ticket" lay-verify="required" lay-search="" >
                            <option th:each="x:${ticketsList}" th:value="${x.ticketId}" th:text="${x.ticketName}+'【'+${x.ticketPrice}+'元】'"></option>
                        </select>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button  class="layui-btn" lay-filter="add" lay-submit="">
                    确定预定
                </button>
            </div>
      </form>
        </div>
    </fieldset>
    </div>
    <script>


        layui.use(['form','layer'], function(){
            $ = layui.jquery;
            var form = layui.form
                ,layer = layui.layer;

            //新增按钮
            form.on('submit(add)', function(data){


                $.ajax({
                    url:"/booking/queryBooking",
                    async: false,
                    type:"POST",
                    dataType: "json",
                    data:data.field,
                    success: function(data){
                        layer.alert(data.info);
                        if(data.info=="预订成功！"){
                            setTimeout("parent.window.location.replace(\"/booking/success\")",500);
                        }
                    }

                })
                return false;
            });

        });



        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //自定义日期格式
            laydate.render({
                elem: '#time'
                ,format: 'yyyy-MM-dd' //可任意组合
            });
        });
    </script>
  </body>

</html>